/**
 * @file _axiom-group.scss
 * @description AxiomGroup 组件样式
 */

.axiom-group {
  display: flex;
  width: 100%;

  &--horizontal {
    flex-direction: row;
  }

  &--vertical {
    flex-direction: column;
  }

  &--grid {
    display: grid;
    grid-template-columns: v-bind(gridColumns);
  }

  &--gap-none {
    gap: 0;
  }

  &--gap-small {
    gap: var(--spacing-sm); // 0.5rem -> 8px
  }

  &--gap-normal {
    gap: var(--spacing-lg); // 1rem -> 16px
  }

  &--gap-large {
    gap: var(--spacing-xl); // 1.5rem -> 24px
  }

  &--gap-xlarge {
    gap: var(--spacing-xxl); // 2rem -> 32px
  }

  &--align-start {
    align-items: flex-start;
  }

  &--align-center {
    align-items: center;
  }

  &--align-end {
    align-items: flex-end;
  }

  &--align-stretch {
    align-items: stretch;
  }

  &--align-baseline {
    align-items: baseline;
  }

  &--justify-start {
    justify-content: flex-start;
  }

  &--justify-center {
    justify-content: center;
  }

  &--justify-end {
    justify-content: flex-end;
  }

  &--justify-space-between {
    justify-content: space-between;
  }

  &--justify-space-around {
    justify-content: space-around;
  }

  &--justify-space-evenly {
    justify-content: space-evenly;
  }

  &--wrap {
    flex-wrap: wrap;
  }

  &--grid.axiom-group--responsive {
    @media (max-width: var(--breakpoint-md)) {
      grid-template-columns: 1fr;
    }

    @media (min-width: calc(var(--breakpoint-md) + 1px)) and (max-width: 1024px) { // 1024px is close to lg, but let's be specific
      grid-template-columns: repeat(2, 1fr);
    }
  }
} 